// 全家原子样式

// ======================
// Flex 布局相关
// ======================
.flex {
  display: flex;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex_row {
  display: flex;
  flex-direction: row;
}

.flex_row_center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flex_row_between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex_col {
  display: flex;
  flex-direction: column;
}

.flex_col_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex_justify_start {
  display: flex;
  justify-content: flex-start;
}

.flex_justify_end {
  display: flex;
  justify-content: flex-end;
}

.flex_align_start {
  display: flex;
  align-items: flex-start;
}

.flex_align_end {
  display: flex;
  align-items: flex-end;
}

@for $i from 1 through 400 {
  @if ($i % 4 == 0) {
    // 只生成步长间隔的数值对应的类
    .fs_#{$i} {
      font-size: #{$i}px !important;
    }
    .m_#{$i} {
      margin: #{$i}px !important;
    }
    .mt_#{$i} {
      margin-top: #{$i}px !important;
    }
    .mb_#{$i} {
      margin-bottom: #{$i}px !important;
    }
    .ml_#{$i} {
      margin-left: #{$i}px !important;
    }
    .mr_#{$i} {
      margin-right: #{$i}px !important;
    }
    .mx {
      margin-left: #{$i}px !important;
      margin-right: #{$i}px !important;
    }
    .my {
      margin-top: #{$i}px !important;
      margin-bottom: #{$i}px !important;
    }
    .p_#{$i} {
      padding: #{$i}px !important;
    }
    .pt_#{$i} {
      padding-top: #{$i}px !important;
    }
    .pb_#{$i} {
      padding-bottom: #{$i}px !important;
    }
    .pl_#{$i} {
      padding-left: #{$i}px !important;
    }
    .pr_#{$i} {
      padding-right: #{$i}px !important;
    }
    .px {
      padding-left: #{$i}px !important;
      padding-right: #{$i}px !important;
    }
    .py {
      padding-top: #{$i}px !important;
      padding-bottom: #{$i}px !important;
    }
  }
}

/* 文本对齐 */
.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

/* 字体加粗 */
.fwb {
  font-weight: bold;
}

/* 隐藏元素 */
.hidden {
  display: none;
}

/* 溢出隐藏 & 文字省略 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@for $i from 1 through 10 {
  .ellipsis_#{$i} {
    display: -webkit-box;
    overflow: hidden;
    // 文字溢出显示省略号
    text-overflow: ellipsis;
    // 限制在指定行数内
    -webkit-line-clamp: $i;
    line-clamp: $i;
    // 垂直方向排列
    -webkit-box-orient: vertical;
    white-space: normal;
    // 解决单词或者数字不换行
    word-break: break-all;
    word-wrap: break-word;
  }
}
